<template>
  <div class="home-page">
    <van-notify id="van-notify" />
    <button v-if="!userInfo" open-type="getUserInfo" @getuserinfo="bindgetuserinfo">点击授权</button>
    <!-- <template v-else> -->
      <van-notice-bar left-icon="volume-o" text="每天可以助力💖10次，捐赠🎁次数无限制~" />
      <van-panel>
        <view>
          <map
            v-if="location"
            id="map"
            :longitude="location.longitude"
            :latitude="location.latitude"
            scale="4"
            :controls="controls"
            :bindcontroltap="controltap"
            :markers="markers"
            :bindmarkertap="markertap"
            :polyline="polyline"
            :bindregionchange="regionchange"
            show-location style="width: 100%; height: 70vh">
          </map>
        </view>
      </van-panel>
      <van-divider
        contentPosition="center"
        customStyle="color: #A1D0F9;border-color: #A1D0F9;font-size: 18px; margin-top: 0;"
      >
        <button class="location-button" @click="show = true">
          <van-image
            class="location-icon"
            width="20"
            height="20"
            src="../../../static/images/location.png"
          />
          不限区域
        </button>
      </van-divider>
      <div class="image-container">
        <div
          :class="'image-wrapper ' + action.class"
          v-for="action in actions"
          :key="action"
          @click="handleAction(action)"
        >
          <van-image
            :width="action.size[0]"
            :height="action.size[1]"
            :src="action.src"
          />
        </div>
      </div>
    <!-- </template> -->
    <van-popup
      class="area-selector"
      :show="show"
      position="bottom"
      custom-style="height: 50%"
    >
      <van-area
        :area-list="areaList"
        :value="area"
        @cancel="show = false"
        @confirm="selectArea"
      />
    </van-popup>
  </div>
</template>

<script>
import card from '@/components/card'
import popup from './popup'
import Notify from '../../../vant-weapp/dist/notify/notify'
// const QQMapWX = require('../../../libs/qqmap-wx-jssdk.js')
import { ACTION_TYPES } from '@/constant'

export default {
  data () {
    return {
      location: null,
      userInfo: null,
      show: false,
      area: '',
      areaList: [],
      actions: ACTION_TYPES(),
      polyline: [{
        points: [{
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.324520,
          latitude: 23.21229
        }],
        color: '#FF0000DD',
        width: 2,
        dottedLine: true
      }],
      controls: []
    }
  },

  components: {
    card,
    popup
  },

  methods: {
    onClose () {
      this.action = null
    },
    selectArea (area) {
      this.area = area
      this.show = false
    },
    handleAction ({ name, text }) {
      const { area } = this
      const mapper = {
        food: {
          type: 'success',
          message: '🍔食物一份'
        },
        heart: {
          type: 'danger',
          message: '💖爱心一个'
        },
        drug: {
          type: 'warning',
          message: '💊医疗救助一份'
        }
      }
      const { type, message } = mapper[name]
      const areaText = area ? `为${area}` : ''
      const db = wx.cloud.database()
      db
        .collection('history')
        .add({
          data: {
            area,
            name,
            text,
            timestamp: Date.now(),
            status: 0
          },
          success: res => {
            db
              .collection('history')
              .count()
              .then(({ total }) => {
                Notify.clear()
                Notify({ type, message: `成功${area ? areaText : ''}助力${message}, 你已经助力${total}份爱心，请在我的爱心中查看详情` })
              })
          },
          fail: console.log
        })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    bindgetuserinfo () {
      const self = this
      wx.getUserInfo({
        success: function ({ userInfo }) {
          self.userInfo = userInfo
          wx.getLocation({
            type: 'wgs84',
            success (location) {
              self.location = location
            }
          })
        },
        fail: function (res) {
          console.log('fail::', res)
        }
      })
    },
    initMapView () {
      // let self = this
      // const qqmapsdk = new QQMapWX({
      //   key: '申请的key'
      // })
    },
    getRegionList () {
      wx.cloud.init()
      const db = wx.cloud.database()
      db
        .collection('region')
        .get()
        .then(res => {
          console.log('res::', res)
          if (res.data && res.data.length > 0) {
            this.areaList = res.data[0]
          }
        })
        .catch(err => {
          console.error(err)
        })
    }
  },
  created () {
    this.getRegionList()
  }
}
</script>

<style lang="scss" scoped>
.home-page button {
  color: #323233;
}

.location-button {
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  &::after {
    border: none;
  }
}

.location-icon {
  margin-top: 3px;
  margin-right: 5px;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.panel-header {
  font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
  color: #323233;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.image-container {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.image-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

.bg-gray {
  background: #ebedf0;
  &:hover {
     background: white;
  }
}
.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

</style>
